<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<style>
			.index-animate .ia1{
				display: inline-block;
				-ms-animation: ia1 1.2s infinite ease-in-out;
				-moz-animation: ia1 1.2s infinite ease-in-out;
				-webkit-animation: ia1 1.2s infinite ease-in-out;
  				animation: ia1 1.2s infinite ease-in-out;
			}
			.ia1{
				-webkit-animation-delay: 0s;
  				animation-delay: 0s;
			}
			@keyframes ia1{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			@-moz-keyframes ia1{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			@-ms-keyframes ia1{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			@-webkit-keyframes ia1{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			
			.index-animate .ia2{
				display: inline-block;
				-ms-animation: ia2 1.3s infinite ease-in-out;
				-moz-animation: ia2 1.3s infinite ease-in-out;
				-webkit-animation: ia2 1.3s infinite ease-in-out;
  				animation: ia2 1.3s infinite ease-in-out;
			}
			.ia2{
				-webkit-animation-delay: 0s;
  				animation-delay: 0s;
			}
			@keyframes ia2{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			@-moz-keyframes ia1{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			@-ms-keyframes ia1{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			@-webkit-keyframes ia1{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			
			
			.index-animate .ia3{
				display: inline-block;
				-ms-animation: ia3 1.4s infinite ease-in-out;
				-moz-animation: ia3 1.4s infinite ease-in-out;
				-webkit-animation: ia3 1.4s infinite ease-in-out;
  				animation: ia3 1.4s infinite ease-in-out;
			}
			.ia3{
				-webkit-animation-delay: 0s;
  				animation-delay: 0s;
			}
			@keyframes ia3{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			@-moz-keyframes ia3{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			@-ms-keyframes ia3{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			@-webkit-keyframes ia3{
				0%   {opacity: 0.1;}
				50%  {opacity: 0.5;}
				100%  {opacity: 1;}	
			}
			
		</style>
		<script type="text/javascript" src="js/init.js"></script>
	</head>
	<body class="index">
		<div class="index-bg pr">
			<div class="index-animate tac pa">
				<p><img class="pr ia1" src="img/index_animateImg.png" style="top: 0.65rem;left: -0.23rem;"></p>
				<p><img class="pr ia2" src="img/index_animateImg.png" style="top: 0.5rem;left: -0.29rem;"></p>
				<p><img class="pr ia3" src="img/index_animateImg.png" style="top: 0.35rem;left: -0.35rem;"></p>
			</div>
			<a class="next" href="swipe.html"></a>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
</html>
